
<template>
  	<div>
		<h2 class="public-title">投注记录</h2>
		<div class="search-wrapper clearfix">
			<div class="search-item item-auto">
				<span>时间：</span>
				<!-- <span v-show="beginTime == '' && endTime == ''" style="margin-right:10px;">全部</span> -->
			</div>
			<div class="search-item item-DatePicker">
				<DatePicker :options="startOption" v-model="beginTime" ref="beginTime" placeholder="开始时间"></DatePicker>
				<DatePicker :options="startOption" v-model="endTime" ref="endTime" placeholder="结束时间"></DatePicker>
			</div>
			<div class="search-item"><Button type="error" @click="search">搜索</Button></div>
			<div class="search-item trading">
				<span class="text">|</span>
				<span :class="msg == 1 ? 'cur' : ''" @click="_getDate( 0, 'DD', 1)">今天</span>
				<span :class="msg == 2 ? 'cur' : ''" @click="_getDate(-1, 'DD', 2)">昨天</span>
				<span :class="msg == 3 ? 'cur' : ''" @click="_getDate( 7, 'DD', 3)">本周</span>
				<span :class="msg == 4 ? 'cur' : ''" @click="_getDate( 0, 'MM', 4)">本月</span>
				<span :class="msg == 5 ? 'cur' : ''" @click="_getDate(-1, 'MM', 5)">上月</span>
			</div>
		</div>
		<div class="screen-wrapper clearfix" v-show="typeList.length || statusList.length">
			<ul>
				<li class="screen-list">
					<div class="name">分类：</div>
					<div class="all"><span :class="{'active' : lotteryType == 0}" @click="_lotteryType(0)">全部</span></div>
					<div class="list"><span :class="{'active' : lotteryType == item.id}" v-for="(item, i) in typeList" :key="i" @click="_lotteryType(item.id)">{{item.name}}</span></div>          
				</li>
				<li class="screen-list">
					<div class="name">状态：</div>
					<div class="all"><span :class="{'active' : tradingStatus == 0}" @click="_tradingStatus(0)">全部</span></div>
					<div class="list"><span :class="{'active' : tradingStatus == item.id}" v-for="(item, i) in statusList" :key="i" @click="_tradingStatus(item.id)">{{item.name}}</span></div>
				</li>
			</ul>
		</div>
      	<!-- 表格部分 -->
     	<Table class="table-wrapper" stripe :columns="tableData" :data="listData" :loading="listLoading"></Table>

		<div class="page-wrapper clearfix" v-show="listData.length">
			<div class="total-wrapper">
				<span>投注:</span>
				<span class="text-green">-{{amountTotal.money}}</span>
				<span style="padding:0 5px;">|</span>
				<span>中奖:</span>
				<span class="text-red">{{amountTotal.award >= 0 ? '+' : '-'}}{{amountTotal.award}}</span>
				<span style="padding:0 5px;">|</span>
				<span>盈利:</span>
				<span :class="profit > 0 ? 'text-red' : 'text-green'">{{profit > 0 ? '+' : ''}}{{profit}}</span>
			</div>
			<Page :total="pageCount" @on-change="_getPage(page)" :current.sync="page"></Page>
		</div>
    </div>
</template>
<script>
import formatDate from '../../../common/js/date.js';
import dateSelection from '@/common/js/dateSelection.js';
export default {
    data() {
		return {
			startOption: {
				disabledDate (date) {
					return date && date.valueOf() > Date.now()
				}
			},
			msg: -1,
			beginTime: '', //开始时间
			endTime: '', //结束时间
			lotteryType: 0, //彩种ID
			tradingStatus: 0, //交易状态 0-全部 1-已中奖 2-未中奖 3-未开奖 4-撤单
			pageCount: 10, //分页数（10等于一页）
			page: 1, //分页
			profit: 0.00, //盈利
			listLoading: false, //列表数据加载
			typeList: [], //彩种列表
			statusList: [], //状态列表
			amountTotal: [], //金额统计
			listData: [], //列表数据
			tableData: [
				{
					title: '时间',
					key: 'addtime'
				},
				{
					title: '期号',
					key: 'issue'
				},
				{
					title: '类型',
					key: 'name'
				},
				{
					title: '投注内容',
					key: 'way'
				},
				{
					title: '投注金额',
					// key: 'money'
					render: function(h, params) {
						return h("div", [
							h("span", {
								class: 'text-green'
							}, '-' + params.row.money)
						]);
					}
				},
				{
					title: '中奖金额',
					// key: 'award'
					render: function(h, params) {
						return h("div", [
							h("span", {
								class: 'text-red'
							}, '+' + params.row.award)
						]);
					}
				},
				{
					title: '状态',
					//key: 'status',
					render: function(h, params) {
						return h("div", [
							h("span", {
								class: params.row.status=='已中奖' ? 'text-red' : ''
							}, params.row.status)
						]);
					}
				}
			],
		}
    },
    created() {
		if (this.$route.query.lottery_type) { //彩种传参
			this.lotteryType = this.$route.query.lottery_type;
		}
		// this.resetAll();
		this._getDate( 0, 'DD', -1);
    },
    methods: {
		_getTimes() { //初始化时间
			this.beginTime = this.$refs.beginTime.visualValue;
			this.endTime = this.$refs.endTime.visualValue;
		},
		search() { //搜索
			let vm = this;
			vm.msg = -1;
			vm.page = 1;
			vm._getTimes();
			if (vm.beginTime > vm.endTime) {
				vm.$Message.warning('结束时间不能小于开始时间');
				return false;
			}
			vm._getListData();
		},
		_getDate(num, string, index) { //筛选时间
			let vm = this;
			vm.msg = index;
			vm.page = 1;
			if (num == 7) { //获取本周
				let date = new Date();
				let timestamp = date.getTime(); //当天时间戳
				let weekday = date.getDay();
				vm.beginTime = formatDate(new Date(timestamp - 3600 * 1000 * 24 * weekday), 'yyyy-MM-dd');
				vm.endTime = formatDate(new Date(timestamp), 'yyyy-MM-dd');
			} else {
				let newtime = dateSelection(num, string);
				vm.beginTime = formatDate(new Date(newtime.beginTime), 'yyyy-MM-dd');
				vm.endTime = formatDate(new Date(newtime.endTime), 'yyyy-MM-dd');
			}
			vm._getListData();
		},
		_getPage(page) {
			let vm = this;
			vm.page = page;
			vm._getTimes();
			vm._getListData();
		},
		resetAll() {
			let vm = this;
			vm.msg = -1;
			vm.beginTime = '';
			vm.endTime = '';
			vm.lotteryType = 0;
			vm.tradingStatus = 0;
			vm.page = 1;
			vm._getListData();
		},
		_lotteryType(id) {
			let vm = this;
			vm.lotteryType = id;
			vm.page = 1;
			vm._getTimes();
			vm._getListData();
		},
		_tradingStatus(id) {
			let vm = this;
			vm.tradingStatus = id;
			vm.page = 1;
			vm._getTimes();
			vm._getListData();
		},
		_getListData() { //列表页数据
			let vm = this;
			vm.listLoading = true;
			let params = {};
				params.token = localStorage.getItem('token');
				params.start_time = vm.beginTime;
				params.end_time = vm.endTime;
				params.type = vm.lotteryType;
				params.status = vm.tradingStatus;
				params.page = vm.page;

			vm.$http.post(vm.urlRequest + "?m=api&c=order&a=betList", params).then(res => {
				if (res.data.status == 0) {
					vm.typeList = res.data.gameInfo;
					vm.statusList = res.data.trantype;
					vm.amountTotal = res.data.total;
					vm.profit = (vm.amountTotal.award - vm.amountTotal.money).toFixed(2);
					vm.listData = res.data.list;
					vm.pageCount = res.data.pageNum * 10;					
					console.log(vm.listData, 'listData')
				} else {
					if (res.data.ret_msg != '') {
						this.$Message.warning(res.data.ret_msg);
					}
				}
				vm.listLoading = false;
			}).catch(err => {
				vm.listLoading = false;
				console.log(err)
			})
		},
    },
    watch: {     
      
    }
}
</script>
<style scoped>
.search-wrapper {
	display: flex;
	justify-content: flex-start;
	margin: 20px 0;
	width: 100%;
	height: auto;
	line-height: 32px;
}
.search-wrapper .search-item {
	margin-right: 10px;
}
.search-wrapper .item-auto {
	width: auto;
	margin-right: 0;
}
.search-wrapper .item-DatePicker {
	width: 300px;
	display: flex;
	justify-content: space-between;
}
.search-wrapper .item-DatePicker >>> .ivu-date-picker {
	width: 48%;
}
.search-wrapper .trading span {
	display: inline-block;
	margin: 4px 0;
	padding: 0 5px;
	line-height: 24px;
	cursor: pointer;
}
.search-wrapper .trading .text:hover {
  	color: red;
}
.search-wrapper .cur {
	color: #fff;
	background: #ed3f14;
	border-radius: 10%;
}

.screen-wrapper {
	padding: 10px 0;
    border-top: 1px solid #eee;
}
.screen-list {
	margin: 15px 0;
	display: flex;
	justify-content: flex-start;
	line-height: 24px;
}
.screen-list .name {
	flex: 0 0 50px;
	width: 50px;
}
.screen-list .all {
	flex: 0 0 50px;
	width: 50px;
}
.screen-list .list {
	flex: 1;
	margin-top: -8px;
}
.screen-list .list span {
	margin-right: 12px;
	margin-top: 8px;
}
.screen-list span {
    display: inline-block;
    padding: 0 5px;
	cursor: pointer;
}
.screen-list span:hover {
	color: #ed3f14;
}
.screen-list span.active {
	color: #fff;
	background: #ed3f14;
	border-radius: 10%;
}

.page-wrapper {
	margin: 20px 0;
	width: 100%;
	text-align: left;
}
.page-wrapper .total-wrapper {
	float: left;
	width: 400px;
	height: 32px;
	line-height: 32px;
	padding: 0 5px;
    font-size: 14px;
}
.table-wrapper >>> .text-red,
.text-red {
    color: #D22727;
}
.table-wrapper >>> .text-green,
.text-green {
    color: #34B86C;
}
.page-wrapper .ivu-page {
	float: left;
}
</style>



// WEBPACK FOOTER //
// src/components/PersonalCenter/betRecord/betRecord.vue